<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="订单编号" prop="orderNumber">
        <el-input
          v-model="queryParams.orderNumber"
          placeholder="请输入订单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择订单状态" clearable>
          <el-option
            v-for="dict in dict.type.or_order_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订购时间" prop="createTime">
        <el-date-picker clearable
          v-model="queryParams.createTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择订购时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['order:order:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <div class="mod-order-order">
      <div class="content">
        <div class="tit">
          <el-row style="width:100%">
            <el-col :span="10">
              <span class="item product">商品</span>
            </el-col>
            <el-col :span="3">
              <span class="item">成交单价/购买数量</span>
            </el-col>
            <el-col :span="3">
              <span class="item">实付金额</span>
            </el-col>
            <el-col :span="3">
              <span class="item">支付方式</span>
            </el-col>
            <el-col :span="3">
              <span class="item">订单状态</span>
            </el-col>
            <el-col :span="2">
              <span class="item">操作</span>
            </el-col>
          </el-row>
        </div>
        <div
          v-for="order in orderList"
          :key="order.orderId"
          class="prod"
        >
          <div class="prod-tit">
            <span>订单编号：{{ order.orderNumber }}</span>
            <span>下单时间：{{ order.createTime }}</span>
          </div>
          <div class="prod-cont">
            <el-row style="width:100%">
              <el-col :span="12">
                <div class="prod-item">
                  <div
                    v-for="orderItem in order.orderItems"
                    :key="orderItem.orderItemId"
                    class="items name"
                  >
                    <div class="prod-image">
                      <img
                        alt=""
                        :src="orderItem.pic"
                        style="height:100px;width: 100px;"
                      >
                    </div>
                    <div class="prod-name">
                      <span>{{ orderItem.prodName }}</span>
                      <span class="prod-info">{{ orderItem.skuName }}</span>
                    </div>
                    <div class="prod-price">
                      <span>￥{{ orderItem.price }}</span>
                      <span>×{{ orderItem.prodCount }}</span>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col
                :span="3"
                style="height: 100%;"
              >
                <div class="item">
                  <div>
                    <span class="totalprice">￥{{ order.actualTotal }}</span>
                    <span v-if="order.freightAmount">（含运费：￥{{ order.freightAmount }}）</span>
                    <span>共{{ order.productNums }}件</span>
                  </div>
                </div>
              </el-col>
              <el-col
                :span="3"
                style="height: 100%;"
              >
                <div class="item">
                  <div>
                    <span v-if="order.payType === 1">微信支付</span>
                    <span v-else-if="order.payType === 2">支付宝</span>
                    <span v-else>手动代付</span>
                  </div>
                </div>
              </el-col>
              <el-col
                :span="3"
                style="height: 100%;"
              >
                <div class="item">
                  <span
                    v-if="order.status === 1"
                    type="danger"
                  >待付款</span>
                  <span
                    v-else-if="order.status === 2"
                    type="danger"
                  >待发货</span>
                  <span
                    v-else-if="order.status === 3"
                    type="danger"
                  >待收货</span>
                  <span
                    v-else-if="order.status === 4"
                    type="danger"
                  >待评价</span>
                  <span
                    v-else-if="order.status === 5"
                    type="danger"
                  >成功</span>
                  <span
                    v-else
                  >失败</span>
                </div>
              </el-col>
              <el-col
                :span="3"
                style="height: 100%;"
              >
                <div class="item">
                  <div class="operate">
                    <el-button
                      type="text"
                      @click="handleUpdate(order)"
                      v-hasPermi="['order:order:edit']"
                    >
                      查看
                    </el-button>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="remark">
            <div class="buyer-remark">
              <span>备注:{{ order.remarks }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="!orderList.length"
      class="empty-tips"
    >
      暂无数据
    </div>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div class="main">
          <div class="content1">
            <div class="order-number">
              <div class="num-cont">
                <el-form-item label="订单编号:">
                  <span class="text">{{ form.orderNumber }}</span>
                </el-form-item>
                <el-form-item>
                  <el-steps
                    :active="form.status"
                    align-center
                    :process-status="form.status == 6 ? 'error':'wait'"
                  >
                    <el-step
                      title="提交订单"
                      :description="form.createTime"
                    />
                    <el-step
                      title="买家已付款"
                      :description="form.payTime"
                    />
                    <el-step
                      v-if="form.orderType !== 1"
                      title="卖家已发货"
                      :description="form.dvyTime"
                    />
                    <el-step
                      v-if="form.orderType !== 1"
                      title="买家已收货"
                      :description="form.finallyTime"
                    />
                  </el-steps>
                </el-form-item>
              </div>
            </div>
            <div class="order-state">
              <div class="state-cont">
                <div class="state-title">
                  <el-form-item label="订单状态:">
                    <template #default>
                      <el-tag
                        v-if="form.status === 1"
                        type="warning"
                      >
                        待付款
                      </el-tag>
                      <el-tag
                        v-if="form.status === 2 && form.orderType !== 1"
                        type="warning"
                      >
                        待发货
                      </el-tag>
                      <el-tag
                        v-if="form.status === 3 && form.orderType !== 1"
                        type="warning"
                      >
                        待收货
                      </el-tag>
                      <el-tag
                        v-if="form.status === 4 && form.orderType !== 1"
                        type="warning"
                      >
                        待评价
                      </el-tag>
                      <el-tag
                        v-if="form.status === 5"
                        type="success"
                      >
                        成功
                      </el-tag>
                      <el-tag
                        v-if="form.status === 6"
                        type="danger"
                      >
                        失败
                      </el-tag>
                    </template>
                  </el-form-item>
<!--                  <el-form-item>
                    <el-row>
                      <el-button
                        v-if="form.status === 2 && form.orderType !== 1"
                        type="primary"
                        plain
                        @click="changeOrder(form.orderNumber)"
                      >
                        发货
                      </el-button>
                    </el-row>
                  </el-form-item>-->
                </div>
                <div class="order-info">
                  <div class="order-details">
                    <div class="detail-title">
                      <img
                        src="~@/assets/img/car.png"
                        alt=""
                      >
                      <span class="prompt">买家付款后才可以发货</span>
                    </div>
                    <div class="detail-cont">
                      <div class="detail01">
                        <img
                          src="~@/assets/img/address.png"
                          alt=""
                        >
                        <div class="text-width">
                          <el-form-item label="收货人:">
                            <span>{{ form.userAddrDto.receiver }}</span>
                          </el-form-item>
                          <el-form-item label="手机:">
                            <span>{{ form.userAddrDto.mobile }}</span>
                          </el-form-item>
                          <el-form-item label="收货地址">
                            <span>{{ form.userAddrDto.province }}{{ form.userAddrDto.city }}{{ form.userAddrDto.area }}{{ form.userAddrDto.addr }}</span>
                          </el-form-item>
                        </div>
                      </div>
                      <div class="detail01">
                        <img
                          src="~@/assets/img/invoice.png"
                          alt=""
                        >
                        <span>不开发票</span>
                      </div>
                    </div>
                  </div>
                  <div class="buyers">
                    <div class="detail-title">
                      <img
                        src="~@/assets/img/buyer.png"
                        alt=""
                        style="margin-right:15px"
                      >
                      <el-form-item
                        label="买家:"
                        style="margin-top:22px"
                        label-width="50px"
                      >
                        <span>{{ form.user.nickName }}</span>
                      </el-form-item>
                    </div>
                    <div class="buyers-info">
                      <div class="detail02">
                        <img
                          src="~@/assets/img/message.png"
                          alt=""
                        >
                        <div class="text-width">
                          <span>买家备注:</span>
                          <br>
                          <span>{{ form.remarks }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="item-list">
                  <el-table
                    :data="form.orderItems"
                    border
                  >
                    <el-table-column
                      prop=""
                      label="商品"
                    >
                      <template #default="scope">
                        <div class="prod-con">
                          <img
                            :src="scope.row.pic"
                            class="prod-img"
                          >
                          <span>{{ scope.row.prodName }}</span>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="单价"
                      width="180"
                      align="center"
                    >
                      <template #default="scope">
                        <span>{{ scope.row.price }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="count"
                      label="数量"
                      width="180"
                      align="center"
                    >
                      <template #default="scope">
                        <span>{{ scope.row.prodCount }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="totalPrice"
                      label="总价"
                      width="180"
                      align="center"
                    >
                      <template #default="scope">
                        <span>{{ scope.row.productTotalAmount }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="item-info">
                  <el-form-item label="商品总价:">
                    <span class="text">￥{{ form.total }}</span>
                  </el-form-item>
                  <el-form-item
                    v-if="form.freightAmount"
                    label="配送费用:"
                  >
                    <span class="text">￥{{ form.freightAmount }}</span>
                  </el-form-item>
                  <el-form-item label="应付金额:">
                    <span class="text">￥{{ form.actualTotal }}</span>
                  </el-form-item>
                </div>
              </div>
            </div>
            <div class="order-log">
              <div class="log-title">
                <span>订单日志</span>
              </div>
              <div class="log-cont">
                <el-form-item
                  v-if="form.createTime"
                  label-width="10px"
                >
                  <span>{{ form.createTime }} {{ form.user.nickName }} 创建订单（成功）</span>
                </el-form-item>
<!--                <el-form-item
                  v-if="form.updateTime"
                  label-width="10px"
                >
                  <span>{{ form.updateTime }} {{ form.user.nickName }} 订单更新（成功）</span>
                </el-form-item>-->
                <el-form-item
                  v-if="form.payTime"
                  label-width="10px"
                >
                  <span>{{ form.payTime }} {{ form.user.nickName }} 订单付款（成功）</span>
                </el-form-item>
                <el-form-item
                  v-if="form.dvyTime"
                  label-width="10px"
                >
                  <span>{{ form.dvyTime }} {{ form.user.nickName }} 订单发货（成功）</span>
                </el-form-item>
                <el-form-item
                  v-if="form.finallyTime"
                  label-width="10px"
                >
                  <span>{{ form.finallyTime }} {{ form.user.nickName }} 完成订单（成功）</span>
                </el-form-item>
                <el-form-item
                  v-if="form.cancelTime"
                  label-width="10px"
                >
                  <span>{{ form.cancelTime }} {{ form.user.nickName }} 取消订单（成功）</span>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { listOrder, getOrder, delOrder, addOrder, updateOrder } from "@/api/order/order";

export default {
  name: "Order",
  dicts: ['or_order_pay_type', 'or_order_status'],
  data() {
    return {
      reverse: true,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单表格数据
      orderList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNumber: null,
        status: null,
        createTime: null,
      },
      // 表单参数
      form: {
        userAddrDto:{
          receiver:null
        },
        user:{
          nickName:null
        }
      },
      // 表单校验
      rules: {
        prodName: [
          { required: true, message: "产品名称,多个产品将会以逗号隔开不能为空", trigger: "blur" }
        ],
        memberId: [
          { required: true, message: "订购用户ID不能为空", trigger: "blur" }
        ],
        orderNumber: [
          { required: true, message: "订购流水号不能为空", trigger: "blur" }
        ],
        total: [
          { required: true, message: "总值不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "订单状态 1:待付款 2:待发货 3:待收货 4:待评价 5:成功 6:失败不能为空", trigger: "change" }
        ],
        createTime: [
          { required: true, message: "订购时间不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询订单列表 */
    getList() {
      this.loading = true;
      listOrder(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        orderId: null,
        shopId: null,
        prodName: null,
        memberId: null,
        orderNumber: null,
        total: null,
        actualTotal: null,
        payType: null,
        remarks: null,
        status: null,
        dvyType: null,
        dvyId: null,
        dvyFlowId: null,
        freightAmount: null,
        addrOrderId: null,
        productNums: null,
        createTime: null,
        updateTime: null,
        payTime: null,
        dvyTime: null,
        finallyTime: null,
        cancelTime: null,
        isPayed: null,
        deleteStatus: null,
        refundSts: null,
        reduceAmount: null,
        orderType: null,
        closeType: null,
        orderItems: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.orderId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const orderId = row.orderId || this.ids
      getOrder(orderId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "查看";
      });
    },

    /*changeOrder(orderNumber) {
      console.info(orderNumber)
    },*/

    /** 导出按钮操作 */
    handleExport() {
      this.download('order/order/export', {
        ...this.queryParams
      }, `order_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss" scoped>
.mod-order-order {
  .tit {
    display: flex;
    height: 45px;
    align-items: center;
  }

  .tit {
    .item {
      padding: 0 10px;
      width: 10%;
      text-align: center;
    }

    .product {
      width: 25%;
    }
  }

  .prod-tit {
    padding: 10px;
    background: #f8f8f9;
    border-left: 1px solid #dddee1;
    border-top: 1px solid #dddee1;
    border-right: 1px solid #dddee1;

    span {
      margin-right: 15px;
    }
  }

  .prod-cont {
    display: flex;
    border-top: 1px solid #dddee1;
    border-bottom: 1px solid #dddee1;
    border-left: 1px solid #dddee1;
    color: #495060;

    .item {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      border-right: 1px solid #dddee1;
      text-align: center;
      height: 100%;

      span {
        display: block;
      }
    }

    .prod-item {
      display: flex;
      flex-direction: column;
      border-right: 1px solid #dddee1;
    }

    .items.name {
      display: flex;
      position: relative;
      padding: 20px;
      border-bottom: 1px solid #dddee1;

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .prod-name {
    width: 55%;
    text-align: left;

    .prod-info {
      display: block;
      color: #80848f;
      margin-top: 30px;
    }
  }

  .prod-price {
    position: absolute;
    right: 40px;
    text-align: right;

    span {
      display: block;
      margin-bottom: 10px;
    }
  }

  .prod-image {
    margin-right: 20px;
    width: 100px;
    height: 100px;

    img {
      width: 100px;
      height: 100px;
    }
  }

  .item {
    span {
      display: block;
      margin-bottom: 10px;
    }

    .operate {
      color: #2d8cf0;
    }

    .totalprice {
      color: #c00;
    }
  }

  .prod {
    .remark {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background-color: #e8f7f6;
      border-left: 1px solid #dddee1;
      border-right: 1px solid #dddee1;
      border-bottom: 1px solid #dddee1;
      margin-bottom: 20px;
    }
  }

  .buyer-remark {
    padding: 0 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.empty-tips {
  display: block;
  width: 100%;
  text-align: center;
  margin: 50px 0;
  color: #999;
}

.main {
  height: 100%;
  width: 100%;
  font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: #495060;
}
.content1 {
  margin: 0 20px;
  .order-state {
    position: relative;
    margin-top: 50px;
    border-bottom: 1px solid #e9eaec;
  }
}
.order-number {
  .text {
    font-size: 14px;
    color: #8a8a8a;
  }
}
.order-state {
  .state-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .order-info {
    width: 100%;
    border-top: 1px solid #e9eaec;
    margin: 50px 0;
    display: flex;
  }
  .item-info {
    padding-left: 80%;
    margin: 25px 0;
  }
}
.order-info {
  img {
    width: 18px !important;
    height: 18px !important;
    margin-right: 15px;
  }
  .detail-title {
    height: 50px;
    line-height: 50px;
    display: flex;
    align-items: center;
  }
  .order-details {
    width: 50%;
    border-right: 1px solid #e9eaec;
  }
  .detail-cont {
    position: relative;
    border-top: 1px dashed #e9eaec;
    margin: 15px 20px 0 0;
  }
  .buyers {
    width: 50%;
    margin-left: 20px;
  }
}
.detail-cont {
  .detail01 {
    display: flex;
    height: 100%;
    line-height: 25px;
    margin-top: 15px;
  }
}
.detail01 {
  .text-width {
    width: 100%;
  }
}
.detail02 {
  .text-width {
    width: 100%;
  }
}
.buyers {
  .buyers-info {
    border-top: 1px dashed #e9eaec;
    margin-top: 15px;
    position: relative;
  }
  .detail02 {
    display: flex;
    height: 100%;
    line-height: 25px;
    margin-top: 15px;
  }
}
.item-info {
  span {
    margin-bottom: 15px;
    line-height: 30px;
  }
  .text {
    position: absolute;
    right: 0;
  }
}
.order-log {
  .log-title {
    height: 50px;
    width: 100%;
    line-height: 50px;
    font-weight: bold;
  }
  .log-cont {
    color: #4395ff;
  }
}
.item-list {
  .prod-con {
    display: flex;
    .prod-img {
      width: 100px;
      height: 100px;
      margin-right: 8px;
    }
  }
}
</style>
